<template>
  <div class="app-container">
    <hq-searchDown ref="hqSearchDown" :select-opts="selectOpts" @click="handleFilter" />
    <div class="filter-container">
      <span class="filter-title filter-item">消费时间</span>
      <k-date-picker v-model="timeValue" class="filter-item" @hqchang="$refs.hqSearchDown.searchFun()" />

    </div>
    <div v-if="authorityHandle(151)" class="extension_btn" @click="extensionDialogShow">推广参数配置</div>
    <!--表格相关 -->
    <el-table
      :data="listData"
      border
      :show-summary="!authorityHandle(154)"
      :summary-method="getSummaries"
      fit
      highlight-current-row
      style="width: 100%; border-radius: 8px; margin-top: 20px;"
      :header-cell-style="{ background: '#F6F5FA', color: '#4E4F62' }"
    >
      <el-table-column width="60px" type="index" label="序号" align="center" />
      <el-table-column prop="extensionName" min-width="100px" label="推广人用户名" align="center" />
      <el-table-column prop="userName" min-width="100px" label="被推广人用户名" align="center" />
      <el-table-column prop="payAmount" min-width="100px" label="消费金额" align="center" />
      <el-table-column prop="payTime" min-width="100px" label="消费时间" align="center" />
      <el-table-column prop="anchorShareAmount" min-width="100px" label="佣金" align="center" />
    </el-table>
    <pagination
      v-show="totalRows > 0"
      :total="totalRows"
      :page.sync="listQuery.pager.pageNo"
      :limit.sync="listQuery.pager.pageSize"
      @pagination="$refs.hqSearchDown.searchFun(1)"
    />
    <!-- 推广参数配置 -->
    <k-dialog
      :show-hide.sync="extension_Show"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="推广参数配置"
      class-name="addBox-dialog"
      :show-foot="false"
      :two-btn="true"
      @click="saveExtensionSetting"
    >
      <div class="extension_box">
        <div class="extension_box_item">
          <span class="E_txt">推广提成:</span>
          <el-input v-model="extensionSettingModle.extensionPercent" />
        </div>
        <div class="extension_box_item">
          <span class="E_txt">推广获得:</span>
          <el-select v-model="extensionSettingModle.extensionBoxId" placeholder="请选择">
            <el-option v-for="item in fissionBoxList" :key="item.lineId" :label="item.lineName" :value="item.lineId" />
          </el-select>
        </div>
        <div class="extension_box_item">
          <span class="E_txt">被推广获得:</span>
          <el-select v-model="extensionSettingModle.passiveExtensionBoxId" placeholder="请选择">
            <el-option v-for="item in fissionBoxList" :key="item.lineId" :label="item.lineName" :value="item.lineId" />
          </el-select>
        </div>
      </div>
    </k-dialog>

  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import hqSearchDown from '@/components/hqSearchDown' // 下拉搜索
import { getFissionBoxList, listUserStreamData, getExtensionSetting, setExtensionSetting } from '@/api/data/data'
export default {
  name: 'Extension',
  components: { Pagination, hqSearchDown },
  data() {
    return {
      // 下拉搜索项0
      selectOpts: [{
        label: '推广人用户名',
        value: 'extensionMobile'
      },
      {
        label: '被推广人用户名',
        value: 'userMobile'
      }
      ],
      extension_Show: false,
      extensionSettingModle: {
        extensionPercent: undefined,
        extensionBoxId: undefined,
        passiveExtensionBoxId: undefined
      },
      timeValue: '',
      listData: [],
      fissionBoxList: [],
      payAmount: 0,
      anchorShareAmount: 0,
      totalRows: 0, // 分页组件--数据总条数
      listQuery: {
        pager: {
          pageNo: 1,
          pageSize: 10,
          totalRows: '',
          start: ''
        },
        sort: '', // 排序字段 为对应列名,
        direction: '', // 排序 正向(asc)逆向(desc),
        startTime: '', // 最终创建时间",
        endTime: '', // 最早支付时间",
        key: '' // 饰品名称'
      }

    }
  },
  watch: {
    timeValue(val) {
      this.listQuery.startTime = this.timeValue ? this.timeValue[0] : null
      this.listQuery.endTime = this.timeValue ? this.timeValue[1] : null
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData(v) {
      listUserStreamData({ ...v, ...this.listQuery }).then(res => {
        const data = res.data
        this.listData = data.rows
        this.totalRows = data.totalRows
        if (this.totalRows === 0) return
        this.payAmount = data.totalData.payAmount
        this.anchorShareAmount = data.totalData.anchorShareAmount
      })
    },
    // 搜索查询事件
    handleFilter(v, type) {
      if (type !== 1) this.listQuery.pager.pageNo = 1
      this.loadData(v)
    },
    saveExtensionSetting() {
      this.$log(this.extensionSettingModle)
      setExtensionSetting(this.extensionSettingModle).then(res => {
        this.$message.success('保存成功')
        this.extension_Show = false
        this.$resetForm(this.extensionSettingModle)
      })
    },
    extensionDialogShow() {
      this.extension_Show = true
      getExtensionSetting().then(res => {
        this.extensionSettingModle = res.data
      })
      getFissionBoxList().then(res => {
        this.fissionBoxList = res.data
      })
    },
    getSummaries(param) {
      const { columns } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) { // 第一列
          sums[index] = '总计'
        } else if (column.property === 'payAmount') {
          sums[index] = this.payAmount
        } else if (column.property === 'anchorShareAmount') {
          sums[index] = this.anchorShareAmount
        } else {
          sums[index] = ''
        }
      })
      return sums
    }
  }
}
</script>

<style lang="scss" scoped>
.filter-container {
  width: 100%;
  height: 48px;
  line-height: 48px;

  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
  }

  .kInput {
    position: absolute;
    right: 20px;
  }

  .filter-title {
    height: 48px;
    line-height: 48px;
    font-size: 16px;
    font-weight: 500;
    margin-right: 22px;
    color: #14162E;
  }

  .user-item {
    margin-left: 10px;
    margin-right: 20px;
  }

  .user-status,
  .account-status {
    margin-right: 20px;
  }
}

.extension_btn {
  width: 120px;
  height: 40px;
  margin-top: 20px;
  font-size: 14px;
  line-height: 40px;
  text-align: center;
  border-radius: 4px;
  cursor: pointer;
  background: #3b425d;
  color: #fff;
  margin-right: 10px;
}

.extension_box {
  width: 500px;

  .extension_box_item {
    width: 400px;
    display: flex;
    align-items: center;
    margin: 0 auto 20px;

    .E_txt {
      display: block;
      width: 100px;
      text-align: right;
      margin-right: 20px;
    }

    .el-input {
      width: 250px;
    }

    .el-input__inner {
      width: 250px;
    }

    .el-input__inner:focus {
      border-color: #3b425d
    }

  }
}
</style>
